import { useState, useEffect, useRef } from 'react'
import 'zarm/dist/zarm.css'
import { Pull } from 'zarm'
import { MyIcon } from '../Icon'
import styles from './index.module.less'
import img1 from '@/assets/img/guestLike/1.jpg'
import img2 from '@/assets/img/guestLike/2.jpg'
import img3 from '@/assets/img/guestLike/3.jpg'
import img4 from '@/assets/img/guestLike/4.jpg'
import img5 from '@/assets/img/guestLike/5.jpg'
import img6 from '@/assets/img/guestLike/6.jpg'

const guestLikeList = [
  { img: img1, text: '361潮牌帽子', price: 39.9, sale: 1303 },
  { img: img2, text: '好品质紫薯', price: 15.9, sale: 133 },
  { img: img3, text: '薄荷清口片', price: 69.9, sale: 199 },
  { img: img4, text: '果粒橙', price: 19.9, sale: 298 },
  { img: img5, text: '蒸汽烟罩', price: 89, sale: 10 },
  { img: img6, text: '口罩', price: 18.9, sale: 455 },
]

const REFRESH_STATE = {
  normal: 0, // 普通
  pull: 1, // 下拉刷新（未满足刷新条件）
  drop: 2, // 释放立即刷新（满足刷新条件）
  loading: 3, // 加载中
  success: 4, // 加载成功
  failure: 5, // 加载失败
}

const LOAD_STATE = {
  normal: 0, // 普通
  abort: 1, // 中止
  loading: 2, // 加载中
  success: 3, // 加载成功
  failure: 4, // 加载失败
  complete: 5, // 加载完成（无新数据）
}

const fetchData = (length, dataSource = []) => {
  let newData = [].concat(dataSource)
  const startIndex = newData.length
  let j = 0
  for (let i = startIndex; i < startIndex + length; i++) {
    newData.push(guestLikeList[j++])
    if (j === guestLikeList.length) {
      j = 0
    }
  }
  return newData
}

let mounted = true

const GuessLike = () => {
  const pullRef = useRef()
  const [dataSource, setDataSource] = useState([])
  const [refreshing, setRefreshing] = useState(REFRESH_STATE.normal)
  const [loading, setLoading] = useState(LOAD_STATE.normal)

  // 模拟请求数据
  const refreshData = () => {
    setRefreshing(REFRESH_STATE.loading)
    setTimeout(() => {
      if (!mounted) return
      setDataSource(fetchData(6))
      setRefreshing(REFRESH_STATE.success)
    }, 2000)
  }

  // 模拟加载更多数据
  const loadData = () => {
    setLoading(LOAD_STATE.loading)
    setTimeout(() => {
      if (!mounted) return
      let loadingState = LOAD_STATE.success
      setDataSource(fetchData(6, dataSource))
      setLoading(loadingState)
    }, 2000)
  }

  useEffect(() => {
    setDataSource(fetchData(6))
    return () => {
      mounted = false
      document.body.style.overflow = 'auto'
    }
  }, [])

  return (
    <div style={{ marginBottom: '60px' }}>
      <div className={styles.title}>
        <MyIcon type="icon-icon2" className={styles.Icon} size="lg" />
        猜你喜欢
      </div>
      <Pull
        ref={pullRef}
        refresh={{
          state: refreshing,
          handler: refreshData,
        }}
        load={{
          state: loading,
          distance: 200,
          handler: loadData,
        }}>
        <div className={styles.guess_like}>
          {dataSource.map((item, i) => (
            <div className={styles.good_container} key={i}>
              <img src={item.img} key={i} alt="" />
              <div className={styles.text}> {item.text}</div>
              <div className={styles.number}>
                <div className={styles.price}>
                  <MyIcon type="icon-renminbi" className={styles.Icon} size="lg" />
                  {item.price}
                </div>
                <div className={styles.sale}>已售{item.sale}</div>
              </div>
            </div>
          ))}
        </div>
      </Pull>
    </div>
  )
}
export default GuessLike
